<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="<s:url value='/resources/js/jquery/jquery-1.5.2.min.js'/>"></script> 
<style type="text/css">
	.content{
		width: 700px;
		height: 665px;
		padding-left: 33px;
	}
	.checkCoTi{
		font-size: 24px;
		color: #c30000;
		text-align: center;
		line-height: 95px;
	}
	.checkColorCase{
		width: 480px;
		height: 260px;
		border: 1px solid #E3E3E3;
		margin: 0 auto;
	}
	.checkColor{
		height: 80px;
		padding-top: 30px;
		width: 387px;
		margin: 0 auto;
	}
	.clr{clear: both;}
	
	.okBt{
		float: right;
    	margin-right: 50px;
    	
    	background: url("<s:url value="/resources/images/shop/guide/ok.png" />");
		border: 0 none;
		height: 31px;
		width: 100px;
		cursor: pointer;
	}
	
	.success{
		height: 139px;
			margin: 0 auto;
			padding-top: 100px;
			width: 217px;
	}
	.success_icon{
		float: left;
	}
	
	.success_text{
		font-size: 24px;
		color: #4c9b0b;
		font-weight: bold;
		float: left;
		line-height: 43px;
    	margin-left: 13px;
	}
	.grocolorca{
		width: 37px;
		height: 35px;
		float: left;
		margin-left: 22px;
		padding: 3px
	}
	.grocolor{
		width: 36px;
		height: 34px;
		cursor: pointer;
	}
	.checked{
		border: 1px solid;
	}
	
	.yellow{
		background-color: #DFC700;
	}
	
	.red{
		background-color: #FF0000;
	}
	
	.blue{
		background-color: #0076B3;
	}
	
	.greed{
		background-color: #0FA120;
	}
	
	.black{
		background-color: #000000;
	}
	input[type="radio"]{
		display: none;
	}
	input{
		display: none;
	}
</style>
<script type="text/javascript">
	var contextpath= "<%=request.getContextPath()%>";
	$(function(){
		//初始化颜色
		var colorMap=$(".colorMap");
		for(var i=0;i<colorMap.size();i++){
			var color=$(colorMap[i]).val();
			if(color!=null&&color!=""){
				$("."+color).parents(".grocolorca").hide();
			}
			
		}
		
		//初始化选择
		var firstC=$($(".grocolorca:visible")[0]);
		firstC.addClass("checked");
		var colorchlid=firstC.children().attr("id");
		$("input#"+colorchlid).attr("checked","checked");
		
		
		//选择颜色
		$(".grocolor").click(function(){
			$(".grocolorca").removeClass("checked");
			$(this).parents(".grocolorca").addClass("checked");
			var id=$(this).attr("id");
			$("input#"+id).attr("checked","checked");
		});
		
		
		$("#selColorForm").submit(function(){
			var color=$("input:radio:checked").val();
			var planid=$("input[name='planid']").val();
			var placeid=$("input[name='placeid']").val();
			$.ajax({
				type: "POST",
				url: "<s:url value="/shop/selColor.do" />",
				data: {"color":color,"planid":planid,"placeid":placeid},
				success: function(msg){
					if(typeof(msg) == 'string'){
						msg = eval("("+msg+")");
					}
					window.parent.location.href=contextpath+"/shop/intoShop.do?placeid="+msg.messageObj;
				}
			}); 
			return false;
		});
	});
	
</script>
</head>
<body>
<div class="content">
	<div class="success">
		<div class="success_icon"><img alt="" src="<s:url value="/resources/images/shop/guide/success.png" />"></div>
		<div class="success_text" style="">签到成功</div>
		<div class="clr"></div>
	</div>
	<div>
		<s:iterator value="#request.colorMap">
			<input type="hidden" id="" class="colorMap" value='<s:property value="value"/>' >
		</s:iterator>
	</div>
	<form id="selColorForm" action="<s:url value="/shop/selColor.do" />" method="post">
	<div class="checkColorCase">
		<div class="checkCoTi">请选择团队颜色</div>
		<input type="hidden"  name="planid"  value="<s:property value="guideSign.planid"/>">
		<input type="hidden"  name="placeid"  value="<s:property value="guideSign.placeid"/>">
		<div class="checkColor">
			<input type="radio" id="yellow" name="color"  value="yellow" >
			<div class="grocolorca ">
				<div id="yellow"  class="grocolor yellow" style=""></div>
			</div>
			
			<input type="radio" id="red" name="color" value="red">
			<div class="grocolorca"><div id="red" class="grocolor red"></div></div>
			
			<input type="radio" id="blue" name="color" value="blue">
			<div class="grocolorca"><div id="blue" class="grocolor blue"></div></div>
			
			<input type="radio" id="greed" name="color" value="greed">
			<div class="grocolorca"><div id="greed" class="grocolor greed"></div></div>
			
			<input type="radio" id="black" name="color" value="black">
			<div class="grocolorca"><div id="black" class="grocolor black"></div></div>
			
			<div class="grocolorca"><div class="clr"></div></div>
		</div>
		<div >
			<input type="submit" class="okBt" value="" style="display: block;">
		
		</div>
	</div>
	</form>
</div>
</body>
</html>